<template>
  <div>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="datas" :height="height" style="width: 100%" @sort-change="sort">
      <el-table-column prop="id" label="设备编号" min-width="100" sortable="custom" />
      <el-table-column prop="group_name" label="分组" min-width="100" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="model" label="手机型号" min-width="100" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="alias" label="别名" min-width="120" sortable="custom" show-overflow-tooltip />
      <el-table-column
        prop="serial_number"
        label="设备序列号"
        min-width="200"
        fit="true"
        sortable="custom"
      />
      <el-table-column prop="activation_code" label="激活码" min-width="160" sortable="custom" />
      <el-table-column label="授权时长" min-width="160" align="right">
        <template slot-scope="{ row }">
          <div v-if="row.auth_time > 1">
            <el-tag size="medium">{{ row.auth_time / 86400 }}天</el-tag>
          </div>
          <div v-if="row.auth_time === 0">
            <el-tag size="medium">永久有效</el-tag>
          </div>
          <div v-if="row.auth_time < 0">
            <el-tag size="medium">无效期</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activation_start_time" label="激活开始时间" min-width="180" sortable="custom" />
      <el-table-column prop="activation_end_time" label="激活结束时间" min-width="180" sortable="custom" />
    </el-table>

    <!-- 分页 -->
    <pagination v-show="count > 0" :total="count" :page.sync="query.page" :limit.sync="query.limit" @pagination="list" />
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import screenHeight from '@/utils/screen-height'
import { list } from '@/api/admin/task-equipment'

export default {
  name: 'Dlist2',

  components: {
    pagination
  },

  props: {
    id: {
      type: Number,
      default: () => (0)
    }
  },

  data() {
    return {
      height: 780,
      loading: false,

      datas: [],

      count: 0,
      query: {
        page: 1,
        limit: 15
      }
    }
  },

  created() {
    this.height = screenHeight()
    this.list()
  },

  methods: {
    list() {
      var that = this
      this.loading = true
      this.query['task_id'] = this.id
      list(this.query).then(res => {
        this.datas = res.data.list
        this.datas.forEach(function(item, index) {
          item['activation_start_time'] = item['activation_start_time'] ? that.getTime(item['activation_start_time']) : ''
          item['activation_end_time'] = item['activation_end_time'] ? that.getTime(item['activation_end_time']) : ''
        })
        this.count = res.data.count
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    // 排序
    sort(sort) {
      this.query['sort_field'] = sort.prop
      this.query['sort_value'] = ''
      if (sort.order === 'ascending') {
        this.query['sort_value'] = 'asc'
        this.list()
      }
      if (sort.order === 'descending') {
        this.query['sort_value'] = 'desc'
        this.list()
      }
    },
    addTime(m) {
      return m < 10 ? '0' + m : m
    },
    // 时间转换
    getTime(time) {
      var times = new Date(time * 1000)
      // shijianchuo是整数，否则要parseInt转换
      var y = times.getFullYear()
      var m = times.getMonth() + 1
      var d = times.getDate()
      var h = times.getHours()
      var mm = times.getMinutes()
      var s = times.getSeconds()
      console.log(y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' +
                    this
                      .addTime(
                        s))
      return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this
        .addTime(
          s)
    }
  }
}
</script>

<style>
</style>
